<template>
    <div id="product_text">
        <div class="alphafied-input">
            <div class="preview-namenecklace ">
                <div class="pri-name">Preview:</div>
                <div id="showtext" class="showtext">{{ message }}</div>
            </div>
            <input class="alpha_text" type="text" maxlength="12" placeholder="Enter Name or text here..." v-model="message" >            
        </div>
    </div>
</template>
<script>
export default {
    name:'Vtext',
    components:{

    },
    data(){
        return {
            message:''
        }
    },
    methods: {
    }
}
</script>
<style>
@font-face {
  font-family: 'AdobeDevanagari';
  src: url('./../../../assets/iconfont/BeautifulES.eot');
  src: url('./../../../assets/iconfont/BeautifulES.eot?#iefix') format('embedded-opentype'),
       url('./../../../assets/iconfont/BeautifulES.woff2') format('woff2'),
       url('./../../../assets/iconfont/BeautifulES.woff') format('woff'),
       url('./../../../assets/iconfont/BeautifulES.ttf') format('truetype'),
       url('./../../../assets/iconfont/BeautifulES.svg#VineMonogramsSolid') format('svg');
  font-weight: normal;
  font-style: normal;
}
.alphafied-input{
    display: flex;
    flex-flow: column;
}
.preview-namenecklace {
    text-align: left;
    padding-left: 10px;
    display: flex;
    justify-content: left;
    align-items: center;
    height:50px;
}
.showtext{
    padding-left:5px;
    font-size: 50px;
    line-height: 1;
    color:#eac855;
    font-family: AdobeDevanagari;
}
.alpha_text{
    height: 48px;
    background: #f8f8f8;
    border: 1px solid #e7e7e7;
    padding-left: 10px;
    margin-bottom:10px;
}
</style>

